<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是平民</title>
    <script type="text/javascript" src="layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="layuiadmin/style/admin.css">
    <style>
        .sel_btn{
            height: 35px;
            line-height: 35px;
            padding: 0 11px;
            background-color: #1E9FFF;
            border-radius: 3px;
            display: inline-block;
            text-decoration: none;
            font-size: 14px;
            outline: none;
        }
        .ch_cls{
            background: #e4e4e4;
        }
        .layui-table-cell{
            height:60px;
            line-height: 60px;
        }
        .onlineDiv{
            width: 120px;
            height: 180px;
            border: 1px solid red;
            border-radius: 15px;
            display: inline-block;
            margin: 20px;
        }
        .onlineDivTwo{
            width: 220px;
            height: 180px;
            border: 1px solid red;
            border-radius: 15px;
            display: inline-block;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div style="width: 1250px;text-align: center">
        <div>
            <!--<div style="font-size: 20px;text-align: center">
                <span id="currentStatus" style="color: red;"></span>我当前抓取的牌是：<img id="mySelfCardImg" style="width: 60px;height: 80px;" src="" alt=""><img id="mySelfCardImg1" style="width: 60px;height: 80px;display: none" src="" alt="">&lt;!&ndash;【<span id="myCard" style="color: red"></span>】&ndash;&gt;
                公共的牌是：&lt;!&ndash;【<span id="publicCard" style="color: red"></span>】&ndash;&gt;<img id="publicImg" style="width: 60px;height: 80px;" src="" alt="">
            </div>-->
            <div style="margin-top: 20px; text-align: center">
                <!--<button class="layui-btn layui-btn-danger" id="shuffle">一键洗牌</button>-->
                <!--<button class="layui-btn layui-btn-normal" id="showPublicCard">发底牌</button>-->
                <!--<button class="layui-btn layui-btn-normal" id="getSelfCard">取牌</button>-->
                <!--<button class="layui-btn layui-btn-normal" id="flopMyCard">翻开我的牌</button>-->
                <button class="layui-btn layui-btn-warm" id="playMethod" >玩法介绍</button>
            </div>

            <div style="font-size: 20px;margin-top: 20px; text-align: center">
                剩余的牌有：<span id="shenyu"></span>
            </div>

            <fieldset class="layui-elem-field" style="display: none;" id="publicFieldSet">
                <legend>******底牌在这儿******</legend>
                <div id="publicCardDiv" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">
                    <div class="onlineDiv">
                        <img id="publicImg" style="width: 90px;height: 110px;padding: 10px;" src="img/morengong.png" alt="">
                    </div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="display: none;" id="mengtuoFieldSet">
                <legend>当前在线：</legend>
                <div id="onlineMtUserList" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">
                </div>
            </fieldset>

            <fieldset class="layui-elem-field" style="display: none;" id="shouFieldSet">
                <legend>当前在线：</legend>
                <div id="onlineSypUserList" style="/*display: none;*/margin-top: 20px; text-align: center" class="layui-field-box">
                </div>
            </fieldset>

            <!--<div style="margin-top: 20px; text-align: center">
                <a class="sel_btn" id="restart">重新开始</a>
            </div>-->
        </div>
        <!--<div style="margin-top: 20px; height: 300px;margin-left: 332px;float: left;display: block;">
            &lt;!&ndash;<div>【翻牌记录】</div>&ndash;&gt;
            <table id="flopRecord" lay-filter="flopRecord"></table>
        </div>
        <div style="margin-top: 20px; height: 300px;float: right;display: block;margin-right: 250px;">
            &lt;!&ndash;<div>【摸牌记录】</div>&ndash;&gt;
            <table id="licensingRecord" lay-filter="licensingRecord"></table>
        </div>-->
    </div>
</body>
<script>
    var username = '';
    var role = '';
    var selfCard = '';
    var model = '';
    var homeownerName = '';
    var layer;
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.jquery;
        layer = layui.layer; //独立版的layer无需执行这一句

        // 1 庄 2 民
        //role = getUrlParameter('role');
        username = getUrlParameter('name');
        homeownerName = getUrlParameter('homeownerName');
        //model = getUrlParameter('model');

        setInterval(function () {
            if(health(homeownerName)){
                getUsers();
            }else{
                window.location.href="roomlist.html?name=" + username;
            }
        },3000);

        $('#restart').on('click',function () {
            var curTotal = getTotal();
            if(parseInt(curTotal) > 0 && parseInt(curTotal) < 55){
                layer.alert("这轮游戏还没完，跑？？等庄家解散才能开始！！！");
                return;
            }
            var indexUrl = 'index.html?name=' + username;
            $('#restart').attr('href',indexUrl);
            userLogOut();
            /*layer.confirm('确定要重新开始吗？', {
                btn: ['重新开始','继续'] //按钮
            }, function(){
                var curTotal = getTotal();
                if(parseInt(curTotal) > 0 && parseInt(curTotal) < 55){
                    layer.alert("妈的，这轮游戏还没完，跑？？等庄家解散才能开始，傻叉");
                    return;
                }
                var indexUrl = 'index.html?name=' + username;
                $('#restart').attr('href',indexUrl);
                userLogOut();
            }, function(){

            });*/
        });

        $('#playMethod').on('click',function () {
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '240px'], //宽高
                title:'玩法介绍',
                content: '<p>1、民勤特别玩法</p>'+
                    '<p>2、其实吧，规矩是死的，人是活的，不要太死板，渴了就【喝点】！！</p>'+
                    '<p>3、其实只有庄家才可以【洗牌】哦！！</p>'+
                    '<p>4、等庄家【发公牌】，你的页面上将会显示出来公共的牌，注意，你自己的的牌需要和公牌比哦！！</p>'+
                    '<p>5、【翻开我的牌】是将你自己的牌翻开，这样所有人都可以看到了！！</p>'+
                    '<p>6、【重新开始】是结束本轮游戏，注意首先需要庄家允许，才可以开下一轮！！</p>'+
                    '<p>7、【翻牌记录】将会记录所有人的所有翻牌操作，不会给你作弊的机会的！！</p>'+
                    '<p>8、【摸牌记录】将会记录所有人的抓牌操作，你抓取的任何一张牌，大家都知道，抓错了？？赶紧喝吧</p>'
            });
        });
    });

    function getUsers(){
        $.ajax({
            url:'v2/getHome?homeownerName=' + homeownerName,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){
                    // var data = '{"msg":"success","code":200,"data":{"mode":2,"userNum":2,"homeowner":"wdc","players":[{"name":"wdc","role":1,"myCards":["img/hongtaoK.png"],"cardsSize":1,"cardsState":1},{"name":"cj","role":0,"myCards":["img/meihua3.png"],"cardsSize":1,"cardsState":1}],"pubCard":"img/bb.png","pooSize":52}}';
                    var obj = res.data;
                    //var obj = JSON.parse(data);
                    var homeowner = obj.homeowner;
                    $('#shenyu').text(obj.pooSize);
                    var mode = obj.mode;
                    if(mode == '2'){
                        $('#publicFieldSet').show();
                        $('#mengtuoFieldSet').show();
                        $('#shouFieldSet').hide();
                    }else if(mode == '1'){
                        $('#publicFieldSet').hide();
                        $('#mengtuoFieldSet').hide();
                        $('#shouFieldSet').show();
                    }
                    var btnHtml = '';
                    if(mode == '2'){
                        $('#publicImg').attr('src',obj.pubCard);
                        $('#onlineMtUserList').children().remove();
                        for(var i = 0 ; i <obj.players.length ; i ++){
                            btnHtml += '<div class="onlineDiv">' +
                                '<span>'+ obj.players[i].name +'</span>';
                            if(obj.players[i].cardsState == '0'){
                                btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="img/morengong.png" >';
                            }else if(obj.players[i].cardsState == '1'){
                                if(username == obj.players[i].name){
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="'+obj.players[i].myCards[0].cardUrl+'" >';
                                }else{
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="img/beimian.png" >';
                                }
                            }else if(obj.players[i].cardsState == '2'){
                                btnHtml += '<img style="width: 90px;height: 110px;padding: 10px;" src="'+ obj.players[i].myCards[0].cardUrl +'" >';
                            }
                            /*if(obj.players[i].role == '1' && obj.players[i].name == username){
                                btnHtml += '<button class="layui-btn layui-btn-xs" onclick="giveYou(\''+homeowner+'\',\''+obj.players[i].name+'\')">发牌</button>'+
                                           '<button class="layui-btn layui-btn-xs" onclick="flopMyCard(\''+homeowner+'\',\''+obj.players[i].name+'\')">翻开</button>';
                            }else*/ if(obj.players[i].name == username && obj.players[i].cardsState == '1'){
                                btnHtml += '<button class="layui-btn layui-btn-xs" onclick="flopMyCard(\''+homeowner+'\',\''+obj.players[i].name+'\')">翻开</button>'+
                                           '<button class="layui-btn layui-btn-xs" onclick="loseCard(\''+homeowner+'\',\''+obj.players[i].name+'\',\''+obj.players[i].cardsState+'\')">扔掉</button>';
                            }
                            btnHtml += '</div>';
                        }
                        $('#onlineMtUserList').append(btnHtml);
                    }else if(mode == '1'){
                        $('#onlineSypUserList').children().remove();
                        for (var i = 0; i < obj.players.length; i++) {
                            btnHtml += '<div class="onlineDivTwo"><div><span>'+obj.players[i].name+'</span></div>';
                            if(obj.players[i].cardsState == '0' && obj.players[i].cardsSize == 0){//state = 0 && size = 0 未发牌
                                btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">'+
                                    '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">';
                            }else if(obj.players[i].cardsState == '0' && obj.players[i].cardsSize == 1){// state = 0 && size = 1 发了一张
                                if(username == obj.players[i].name){
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="'+obj.players[i].myCards[0].cardUrl+'" alt="">'+
                                        '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">';
                                }else{
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/beimian.png" alt="">'+
                                        '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/morengong.png" alt="">';
                                }
                            }else if(obj.players[i].cardsState == '1'){ // state = 1 发了两张 自己能看到，其他人背面
                                if(username == obj.players[i].name){
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="'+obj.players[i].myCards[0].cardUrl+'" alt="">'+
                                        '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="'+obj.players[i].myCards[1].cardUrl+'" alt="">';
                                }else{
                                    btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/beimian.png" alt="">'+
                                        '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="img/beimian.png" alt="">';
                                }
                            }else if(obj.players[i].cardsState == '2') { // state = 2 两张都翻开了
                                btnHtml += '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="' + obj.players[i].myCards[0].cardUrl + '" alt="">' +
                                    '<img style="width: 90px;height: 110px;padding: 10px 5px;" src="' + obj.players[i].myCards[1].cardUrl + '" alt="">';
                            }
                            /*if(obj.players[i].role == '1' && obj.players[i].name == username){
                                btnHtml += '<button class="layui-btn layui-btn-xs" onclick="giveYou(\''+homeowner+'\',\''+obj.players[i].name+'\')">发牌</button>'+
                                           '<button class="layui-btn layui-btn-xs" onclick="flopMyCard(\''+homeowner+'\',\''+obj.players[i].name+'\')">翻开</button>';
                            }else */
                            if(obj.players[i].name == username && obj.players[i].cardsState == '1'){
                                btnHtml += '<button class="layui-btn layui-btn-xs" onclick="flopMyCard(\''+homeowner+'\',\''+obj.players[i].name+'\')">翻开</button>'+
                                           '<button class="layui-btn layui-btn-xs" onclick="loseCard(\''+homeowner+'\',\''+obj.players[i].name+'\',\''+obj.players[i].cardsState+'\')">扔掉</button>';
                            }
                            btnHtml += '</div>';
                        }
                        $('#onlineSypUserList').append(btnHtml);
                    }
                }
            },
            error: function(msg){}
        });
    }

    function giveYou(homeowner,name) {
        $.ajax({
            url:'v2/setPriCard?homeownerName=' + homeowner + '&userName=' + name,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){
                    layer.msg("给【"+name+"】发牌成功！！！");
                }else if(res.code == 500){
                    layer.msg(res.msg);
                }
            },
            error: function(msg){}
        });
    }

    function flopMyCard(homeowner,name){
        layer.confirm('确定翻开吗？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            $.ajax({
                url:'v2/flop?homeownerName=' + homeowner + '&userName=' + name,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        layer.msg("翻牌成功！！！");
                    }else if(res.code == 500){
                        layer.msg(res.msg);
                    }
                },
                error: function(msg){}
            });
        });
    }

    function loseCard(homeowner,name,cardState) {
        if(cardState == 0){
            layer.msg("没牌，不能扔牌！！");
            return;
        }
        if(cardState == 2){
            layer.msg("已经翻开了，不能扔牌！！");
            return;
        }
        layer.confirm('确定扔掉吗？', {
            btn: ['确定','取消'] //按钮
        }, function() {
            $.ajax({
                url:'v2/loseCard?homeownerName=' + homeowner + '&userName=' + name,
                type:'get',
                async:false,
                success:function(res){
                    if(res.code == 200){
                        layer.msg("【"+name+"】扔牌成功！！！");
                    }else if(res.code == 500){
                        layer.msg(res.msg);
                    }
                },
                error: function(msg){}
            });
        });
    }

    function health(homeownerName) {
        var isHealth = true;
        $.ajax({
            url:'v2/health?homeownerName=' + homeownerName,
            type:'get',
            async:false,
            success:function(res){
                if(res.code == 200){

                }else if(res.code == 500){
                    isHealth = false;
                    layer.msg(res.msg);
                }
            },
            error: function(msg){}
        });
        return isHealth;
    }
</script>
</html>
